<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #table{
            width: 916px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        #table input{
            width: 208px;
            box-sizing: border-box;
        }
        p{
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <label for="stunum">学号</label>
    <input type="text" id="stunum"> 
    <label for="name">姓名</label>
    <input type="text" id="name">
    <label for="site">地址</label>
    <input type="text" id="site">
    <label for="number">电话</label>
    <input type="text" id="number">
    <button id="add">添加</button>
    <button id="del">删除</button>
    <table id="table">
        <tbody id="tbody">

        </tbody>
    </table>
    <script>
        var inputs = document.querySelectorAll('input')
        var add = document.querySelector('#add')
        var del = document.querySelector('#del')
        var tab = document.querySelector('#table')
        var tbody = document.querySelector('#tbody')
        var btndel = document.createElement('button')
        btndel.innerHTML = '删除这一条'
       
        add.onclick = function(){
            
            tab.appendChild(tbody)
            var p = document.createElement('p')
            tbody.appendChild(p)
            inputs.forEach(function(item,index){
                var input = document.createElement('input')
                input.value = item.value 
                p.appendChild(input)
                item.value = null
            })

            var btndel = document.createElement('button')
            btndel.innerHTML = '删除这一条'
            p.appendChild(btndel)
            btndel.addEventListener('click',function(){
           tbody.removeChild(this.parentElement)
            })
        }
       
        del.onclick = function(){
            tbody.innerHTML = null
        }
        
    </script>
</body>
</html>